<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>智能提醒管理 - 记忆增强系统</title>
    <style>
        /* 基础样式 */
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }
        body {
            margin: 0;
            min-height: 100vh;
            background: linear-gradient(to bottom right, #e3f2fd, #f5f7fa);
            padding: 2rem;
        }
        /* 容器样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 2rem;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }
        /* 标题区域 */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #e0e0e0;
        }
        .page-title {
            font-size: 2.2rem;
            color: #1a73e8;
            margin: 0;
            font-weight: 600;
        }
        .back-link {
            color: #1a73e8;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
        }
        .back-link:hover {
            transform: translateX(-5px);
        }
        /* 表格样式 */
        .reminder-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 0.5rem;
            margin-bottom: 2rem;
        }
        .reminder-table th {
            background-color: #f8f9fa;
            color: #555;
            font-weight: 600;
            padding: 1rem;
            text-align: left;
            border-bottom: 2px solid #e0e0e0;
        }
        .reminder-table td {
            padding: 1rem;
            background: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.3s;
        }
        .reminder-table tr:hover td {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        /* 操作列容器 */
        .action-column {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        /* 增强型按钮样式 */
        .action-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: 1rem;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            min-width: 90px;
            justify-content: center;
        }
        .delete-btn {
            background: linear-gradient(135deg, #f44336, #ef5350);
            color: white;
        }
        .delete-btn:hover {
            background: linear-gradient(135deg, #d32f2f, #e53935);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(211, 47, 46, 0.3);
        }
        .edit-btn {
            background: linear-gradient(135deg, #42a5f5, #1e88e5);
            color: white;
        }
        .edit-btn:hover {
            background: linear-gradient(135deg, #1976d2, #1565c0);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(25, 118, 210, 0.3);
        }
        /* 图标容器 */
        .btn-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
        }
        /* SVG 图标样式 */
        .btn-icon svg {
            width: 100%;
            height: 100%;
            fill: currentColor;
        }
        /* 表单容器 */
        .form-container {
            background: #f8f9fa;
            border-radius: 1.5rem;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        }
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }
        .form-group {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #555;
        }
        input, select {
            padding: 0.75rem;
            border: 2px solid #e0e0e0;
            border-radius: 1rem;
            font-size: 1rem;
            transition: all 0.3s;
        }
        input:focus, select:focus {
            outline: none;
            border-color: #1a73e8;
            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
        }
        .submit-btn {
            background: linear-gradient(135deg, #1a73e8, #3f8efc);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 1rem;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s;
            width: fit-content;
            margin-top: 1rem;
        }
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(26, 115, 232, 0.3);
        }
        /* 状态标签 */
        .status-tag {
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            font-size: 0.85rem;
            font-weight: 500;
            text-align: center;
        }
        .status-completed {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
        }
        /* 错误提示 */
        .error-message {
            color: #d32f2f;
            margin-top: 1rem;
            background: #ffebee;
            padding: 1rem;
            border-radius: 1rem;
            border-left: 4px solid #d32f2f;
        }
        /* 响应式设计 */
        @media (max-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr;
            }
            .action-column {
                flex-direction: row;
                justify-content: flex-start;
                gap: 0.5rem;
            }
            .action-btn {
                min-width: 80px;
                padding: 0.5rem 1rem;
                font-size: 0.85rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">智能提醒管理</h1>
            <a href="index.html" class="back-link">← 返回导航页</a>
        </div>
        
        <!-- 提醒列表 -->
        <table class="reminder-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>内容</th>
                    <th>触发时间</th>
                    <th>重复类型</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="reminder-body">
                <!-- 数据由 JavaScript 动态填充 -->
            </tbody>
        </table>
        
        <!-- 新增提醒表单 -->
        <div class="form-container">
            <h2 style="margin-top:0; color:#1a73e8;">新增提醒</h2>
            <form id="add-form">
                <div class="form-grid">
                    <!-- ID 输入 -->
                    <div class="form-group">
                        <label for="id">ID</label>
                        <input type="number" id="id" placeholder="请输入 ID" required>
                    </div>
                    <!-- 内容输入 -->
                    <div class="form-group">
                        <label for="content">内容</label>
                        <input type="text" id="content" placeholder="请输入提醒内容" required>
                    </div>
                    <!-- 触发时间 -->
                    <div class="form-group">
                        <label for="triggerTime">触发时间</label>
                        <input type="datetime-local" id="triggerTime">
                    </div>
                    <!-- 重复类型 -->
                    <div class="form-group">
                        <label for="repeat">重复类型</label>
                        <select id="repeat">
                            <option value="single">单次</option>
                            <option value="daily">每天</option>
                        </select>
                    </div>
                    <!-- 完成状态 -->
                    <div class="form-group">
                        <label for="isCompleted">完成状态</label>
                        <select id="isCompleted">
                            <option value="false">未完成</option>
                            <option value="true">已完成</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="submit-btn">提交提醒</button>
            </form>
            <!-- 错误提示 -->
            <p id="error" class="error-message" style="display:none;"></p>
        </div>
    </div>

    <script>
        // === 初始化加载数据 ===
        function fetchReminders() {
            fetch("http://47.109.75.129:3000/reminders")
                .then(response => response.json())
                .then(data => {
                    const tableBody = document.getElementById("reminder-body");
                    tableBody.innerHTML = "";
                    if (data.length === 0) {
                        tableBody.innerHTML = "<tr><td colspan='6'>暂无数据</td></tr>";
                        return;
                    }
                    data.forEach(item => {
                        const row = document.createElement("tr");
                        row.innerHTML = `
                            <td>${item.id}</td>
                            <td>${item.content}</td>
                            <td>${formatDateTime(item.triggerTime)}</td>
                            <td>${item.repeat}</td>
                            <td><input type="checkbox" ${item.isCompleted ? "checked" : ""} onchange="toggleComplete(${item.id}, this.checked)"></td>
                            <td class="action-column">
                                <button onclick="deleteReminder(${item.id})" class="action-btn delete-btn">
                                    <span class="btn-icon">
                                        <svg viewBox="0 0 24 24">
                                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
                                        </svg>
                                    </span>
                                    删除
                                </button>
                                <button onclick="editReminder(${item.id})" class="action-btn edit-btn">
                                    <span class="btn-icon">
                                        <svg viewBox="0 0 24 24">
                                            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                                        </svg>
                                    </span>
                                    编辑
                                </button>
                            </td>
                        `;
                        tableBody.appendChild(row);
                    });
                })
                .catch(error => {
                    const errorDiv = document.getElementById("error");
                    errorDiv.textContent = "无法加载数据，请检查后端服务";
                    errorDiv.style.display = "block";
                });
        }

        // === 格式化时间 ===
        function formatDateTime(dateTimeStr) {
            if (!dateTimeStr) return "";
            return dateTimeStr.replace(".000", "").replace("T", " ");
        }

        // 表单提交事件
        document.getElementById("add-form").addEventListener("submit", function(e) {
            e.preventDefault();
            const id = document.getElementById("id").value; 
            const content = document.getElementById("content").value;
            const triggerTime = document.getElementById("triggerTime").value;
            const repeat = document.getElementById("repeat").value;
            const isCompleted = document.getElementById("isCompleted").value === "true";
            
            const payload = {
                id: id ? parseInt(id) : undefined, 
                content,
                triggerTime,
                repeat,
                isCompleted
            };
            
            fetch("http://47.109.75.129:3000/reminders", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(payload)
            })
                .then(response => {
                    if (!response.ok) throw new Error("新增失败");
                    return response.json();
                })
                .then(() => {
                    document.getElementById("add-form").reset();
                    fetchReminders(); 
                })
                .catch(error => {
                    const errorDiv = document.getElementById("error");
                    errorDiv.textContent = "新增提醒失败：" + error.message;
                    errorDiv.style.display = "block";
                });
        });

        // === 删除提醒 ===
        function deleteReminder(id) {
            if (!confirm("确定要删除此提醒吗？")) return;
            fetch(`http://47.109.75.129:3000/reminders/${id}`, {
                method: "DELETE"
            })
                .then(response => {
                    if (!response.ok) throw new Error("删除失败");
                    return response.json();
                })
                .then(() => fetchReminders())
                .catch(error => {
                    const errorDiv = document.getElementById("error");
                    errorDiv.textContent = "删除提醒失败：" + error.message;
                    errorDiv.style.display = "block";
                });
        }

        // === 编辑提醒 ===
        function editReminder(id) {
            const reminder = prompt("请输入新内容：");
            if (reminder === null) return;
            const triggerTime = prompt("请输入新时间（YYYY-MM-DDTHH:MM）：", "2025-06-05T12:00");
            const repeat = prompt("请输入新重复类型（single/daily）：", "single");
            const isCompleted = confirm("是否完成？");
            
            fetch(`http://47.109.75.129:3000/reminders/${id}`, {
                method: "PUT",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    content: reminder,
                    triggerTime,
                    repeat,
                    isCompleted
                })
            })
                .then(response => {
                    if (!response.ok) throw new Error("更新失败");
                    return response.json();
                })
                .then(() => fetchReminders())
                .catch(error => {
                    const errorDiv = document.getElementById("error");
                    errorDiv.textContent = "更新提醒失败：" + error.message;
                    errorDiv.style.display = "block";
                });
        }

        // === 切换完成状态 ===
        function toggleComplete(id, completed) {
            fetch(`http://47.109.75.129:3000/reminders/${id}`, {
                method: "PUT",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ isCompleted: completed })
            })
                .then(response => {
                    if (!response.ok) throw new Error("更新失败");
                    return response.json();
                })
                .then(() => fetchReminders())
                .catch(error => {
                    const errorDiv = document.getElementById("error");
                    errorDiv.textContent = "更新提醒失败：" + error.message;
                    errorDiv.style.display = "block";
                });
        }

        // === 页面加载时获取数据，并定时刷新 ===
        window.onload = () => {
            fetchReminders(); 
            setInterval(fetchReminders, 10000); 
        };
    </script>
</body>
</html>